<template>
	<view class="activity">
		<view class="subsection-view">
			<u-subsection mode="subsection" activeColor="#f0ad4e" :list="subsectionList" :current="curNow" @change="sectionChange"></u-subsection>
		</view>
		<view class="tabs-view">
			<u-tabs 
				:list="tabsList" 
				lineWidth="30"
				lineHeight="6"
				lineColor="#f56c6c"
       		></u-tabs>
		</view>
		
		<view class="activity-content">
			<scroll-view :refresher-enabled="true" :scroll-y="true" :style="{ height: activityListHeight + 'px' }" >
				<view class="activity-list">
					<block v-for="(item, index) in dataList" :key="index">
						<v-card class="activity-item">
							<view class="activity-item-type">
								{{ item.type }}
							</view>
							<view class="activity-item-show">
							
								<image class="activity-item-img" :src="item.pic" mode="widthFix"></image>
								<view class="activity-item-time">
									<u-icon name="clock" color="#fff" size="18"></u-icon> {{ item.time }}
								</view>
							</view>
							<view class="activity-item-info">
								<view class="activity-item-title">
									<img class="activity-item-flag" :src="iconFlag" alt="">
									<view class="activity-item-name"> {{ item.name }}</view>
								</view>
								<view class="activity-user">
									
									<view class="user-name">
										<img class="user-img" :src="csImg" alt="">
										
										<view class="user-name">{{ item.userName }}</view>
									</view>
									<view class="user-view">
										<u-icon name="play-circle" color="#c0c0c0" size="18"></u-icon> 
										<view class="user-num">{{ item.viewNum }}</view>
									</view>
									
								</view>
							</view>
						</v-card>
					</block>
				
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
const csImg = 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
export default {
	props: {
		newsPanelHeight: {
			type: Number,
			default: 0
		},
		tabbarIndex: {
			type: Number,
			default: 0
		},
	},
	data() {
		return {
			iconFlag: '/static/images/icon-flag.png',
			csImg: csImg,
			curNow: 0,
			subsectionList: [
				{
					name: '正在进行'
				}, 
				{
					name: '过往活动'
				}
			],
			tabsList: [
				{
					name: '全部'
				}, 
				{
					name: '饭搭',
				}, 
				{
					name: '运动',
				},
				{
					name: '游戏',
				}, 
				{
					name: '户外',
				}
			],
			dataList: [
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: this.iconFlag,
					userImg: csImg,
				},
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				},
				
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				},
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				}
			]
		}
	},
	computed:{
		activityListHeight() {
			let height = this.newsPanelHeight
			uni.createSelectorQuery().select('.subsection-view').boundingClientRect(data => {
				if(data) {
					height = height - data.height
				}
			}).exec()
			uni.createSelectorQuery().select('.tabs-view').boundingClientRect(data => {
				if(data) {
					height = height - data.height
				}
			}).exec()
			return height - 75
		}
	},
	methods: {
		sectionChange(index) {
			this.curNow = index;
		}
	},
	onLoad() {
		
	},
}
</script>

<style lang="scss" scoped>
.activity{
	margin-top: 10px;
	.subsection-view{
		margin-top: 10px;
	}
	.tabs-view{
		margin-top: 10px;
	}
	.activity-content{
		margin-top: 10px;
		// overflow-y: scroll;
		.activity-list{
			// display: flex;
			// flex-flow: wrap;

			padding-bottom: 200px;
			column-count: 2;
  			column-gap: 20rpx;
			orphans: 1;


			.activity-item{
				// width: calc(100%/2 - 20px);
				margin: 5px;
				position: relative;
				background: white;
	
				break-inside: avoid;
				
				.activity-item-info{
					padding: 10px;
					font-size: 14px;
					position: relative;
					
					.activity-user{
						color: #c0c0c0;
						@include flexBetween;
						margin-top: 8px;
						.user-view{
							@include flexAllCenter;
							.user-num{
								margin-left: 3px;
							}
						}
						.user-name{
							@include flexAllCenter;
							.user-img{
								width: 22px;
								height: 22px;
								border-radius: 50%;
								margin-right: 5px;
							}
						}
					
					}
					.activity-item-title{
						display: flex;
						align-items: center;
						font-size: 16px;
						letter-spacing: 1px;
						.activity-item-name{
							@include clampSpot(1);
						}
						.activity-item-flag{
							margin-right: 5px;
							width: 16px;
							height: 16px;
						}
					}
				}
				
				.activity-item-type{
					padding: 5px 10px;
					background: $uni-color-warning;
					border-radius: 15px;
					position: absolute;
					left: 5px;
					top: 5px;
					z-index: 1;
					white-space: nowrap;
				}
				.activity-item-show{
					position: relative;
					.activity-item-time{
						color: white;
						position: absolute;
						right: 5px;
						bottom: 10px;
						backdrop-filter: blur(10px);
						background: rgba(0, 0, 0, 0.1);
						padding: 0 5px;
						line-height: 20px;
						display: flex;
						align-items: center;
						font-size: 14px;
					}
					.activity-item-img{
						width: 100%;
					
					}
				}
			
			}
		}
	}
	
}
	
</style>
